<template>
  <div class="all">
    <div class="class">
      <div class="class-header">
        <div class="header-left">
          <div class="line"></div>
          <div class="title">考勤记录</div>
          <el-input
            v-model="classSearchInput"
            placeholder="请输入姓名"
            style="width: 150px"
            class="className"
            v-if="user.roleId == '1' || user.roleId == '2'"
          ></el-input>
          <el-date-picker
            v-model="currentYearMonth"
            type="month"
            placeholder="选择查询时间"
            style="width: 150px"
            value-format="YYYY-MM"
            class="className"
          ></el-date-picker>
          <div style="position: relative" >
            <el-button @click="handleSearch" class="search">搜索</el-button>
            <img src="../../assets/images/搜索.png" class="searchImg" alt="" />
          </div>
        </div>
        <div class="header-right">
          <el-button
            link
            type="primary"
            class="addRiBao"
            @click="handleAddLog"
            v-if=false>添加考勤信息</el-button
          >
        </div>
      </div>
    </div>

    <div class="class-content">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="userName" label="姓名" align="center" />
        <el-table-column prop="recordMonth" label="月份" align="center" >
          <template #default="{ row }">
            {{ row.recordMonth.substring(0, 7) }}
          </template>
        </el-table-column>
        <el-table-column prop="leaveDays" label="请假(天)" align="center" />
        <el-table-column prop="roleName" label="职能" align="center" />
        <el-table-column prop="outDays" label="出差(天)" align="center" />
        <el-table-column prop="presenceDays" label="应出勤(天)" align="center" />
        <el-table-column prop="realPresenceDays" label="实际出勤(天)" align="center" />
      </el-table>
      <div class="page">
        <el-pagination background layout="prev, pager, next" :total="total" :current-page="currentPage" :page-size="pageSize" @current-change="handleCurrentPageChange" />
        <div> 
            每页
            <el-input-number
              v-model="pageSize"
              :min="1"
              :max="30"
              controls-position="right"
              @change="handleChange"
            />条
        </div>
      </div>
    </div>
    <!-- 添加考勤 -->
    <el-dialog v-model="dialogVisibleLog" title="发布日志" width="400px" :show-close="false">
      <el-form
        :model="formData"
        :rules="rules"
        ref="formRef"
        label-width="100px"
        hide-required-asterisk
      >
        <el-row>
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="formData.userName" disabled />
          </el-form-item>
          <el-form-item label="工作时长" prop="workDays">
            <el-input v-model="formData.workDays" placeholder="请输入工作时长(天)" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="标识" prop="roleId">
            <!-- 下拉框 -->
            <el-select
              v-model="formData.roleId"
              placeholder="请选择标识"
              style="width: 200px"
              disabled
            >
              <el-option
                v-for="item in identityList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="应出勤" prop="presenceDays">
            <el-input v-model="formData.presenceDays" placeholder="请输入应出勤天数(天)"  />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="请假天数" prop="leaveDays">
            <el-input v-model="formData.leaveDays" placeholder="请输入请假天数(天)" />
          </el-form-item>
          <el-form-item label="实际出勤" prop="realPresenceDays">
            <el-input v-model="formData.realPresenceDays"  placeholder="请输入实际出勤天数(天)" />
          </el-form-item>
        </el-row>
        <el-row v-if="user.roleId=='3' || user.roleId== '5'">
          <el-form-item label="出差时长" prop="outDays" >
            <el-input v-model="formData.outDays" placeholder="请输入出差天数(天)" />
          </el-form-item>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisibleLog = false" class="cancel">取消</el-button>
        <el-button type="primary" @click="handleConfirm" class="confirm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup>


import { ref, onMounted } from 'vue'
import { getWork,getWorkList ,addWork,getWorkMenu} from '@/components/api/Work'
import { ElMessage, ElMessageBox } from 'element-plus'

//本地存储
const user = JSON.parse(localStorage.getItem('user'))

// 定义当前年月
const currentYearMonth = ref('')

// 当前页
const currentPage = ref(1)
// 每页显示的条数
const pageSize = ref(7)
// 总条数
const total = ref(0)
// 搜索框输入的值
const classSearchInput = ref('')
// 表格数据
const tableData = ref([])

// 身份标识列表
const identityList = ref([])



// 获取数据
const fetchData = () => {
    const data = {
      pageIndex: currentPage.value,
      pageSize: pageSize.value,
      userName: classSearchInput.value,
    }
    if (currentYearMonth.value) {
      data.recordMonth = currentYearMonth.value
    }

    getWork("attendancesList",data).then((res) => {
    
      tableData.value = res.dataset.attendanceList
      total.value = res.dataset.pageCount*pageSize.value
    })
}

//个人考勤列表
const fetchData1 = () => {
  const data = {
    pageIndex: currentPage.value,
    pageSize: pageSize.value,
    userId: user.userId,
    roleId: user.roleId,
  } 
  if (currentYearMonth.value) {
    data.recordMonth = currentYearMonth.value
  }
  getWorkList("attendancesListPersonal",data).then((res) => {

    tableData.value = res.dataset.attendanceList
    total.value = res.dataset.pageCount* pageSize.value
  })
}

//身份标识接口
//获取身份标识列表
function fetchData2() {
  let data = {}
  getWorkMenu('roleList', data).then((res) => {
    if (res.code === 200) {
      identityList.value = res.dataset
    }
  })
}



// 获取当前年月
onMounted(() => {
  if(user.roleId == "3" || user.roleId =='4' || user.roleId == '5'){
    fetchData1() 
  }else{
    fetchData()
  }
  fetchData2()
})


// 处理当前页变化
const handleCurrentPageChange = (value) => {
  currentPage.value = value
    if(user.roleId == '3' || user.roleId == '4' || user.roleId == '5'){
    fetchData1() 
  }else{
    fetchData()
  }
}

//搜索
const handleSearch = () => {
  currentPage.value = 1
    if(user.roleId == '3' || user.roleId == '4' || user.roleId == '5'){
    fetchData1() 
  }else{
    fetchData()
  }
}


// 添加考勤
const dialogVisibleLog = ref(false) // 控制弹窗的显示隐藏
const formRef = ref(null)
const formData = ref({
  userId: user.userId, // 初始值为当前用户的 ID
  userName: user.userName, // 初始值为当前用户的姓名
  roleId: user.roleId, // 初始值为当前用户的角色 ID
  leaveDays: '', // 初始值为空
  outDays: '', // 初始值为空
  workDays: '', // 初始值为空
  presenceDays: '', // 初始值为空
  realPresenceDays: '', // 初始值为空
})
// 添加考勤
const handleAddLog = () => {
  // 清空表单数据
  formData.value = {
    userId: user.userId, // 初始值为当前用户的 ID
    userName: user.userName, // 初始值为当前用户的姓名
    roleId: user.roleId, // 初始值为当前用户的角色 ID
    leaveDays: '', // 初始值为空
    outDays: '', // 初始值为空
    workDays: '', // 初始值为空
    presenceDays: '', // 初始值为空
    realPresenceDays: '', // 初始值为空
  }
  if(formRef.value){
    formRef.value.resetFields()
  }
  dialogVisibleLog.value = true
}

// 表单验证规则
const rules = {
  leaveDays: [
    { required: true, message: '请输入请假天数', trigger: 'blur' },
  ],
  outDays: [
    { required: true, message: '请输入出差天数', trigger: 'blur' },
  ],
  workDays: [
    { required: true, message: '请输入工作天数', trigger: 'blur' },
  ],
  presenceDays: [
    { required: true, message: '请输入应出勤天数', trigger: 'blur' },
  ],
  realPresenceDays: [
    { required: true, message: '请输入实际出勤天数', trigger: 'blur' },
  ],
}

//添加接口
function addWorkData() {
  let data = {
    userId: user.userId, // 初始值为当前用户的 ID
    userName: user.userName, // 初始值为当前用户的姓名
    roleId: user.roleId, // 初始值为当前用户的角色 ID
    leaveDays: formData.value.leaveDays, // 初始值为空
    workDays: formData.value.workDays, // 初始值为空
    presenceDays: formData.value.presenceDays, // 初始值为空
    realPresenceDays: formData.value.realPresenceDays, // 初始值为空
  }
  if (user.roleId == '3' || user.roleId == '5') {
    data.outDays = formData.value.outDays // 初始值为空
  }else{
    data.outDays = 0 // 初始值为空
  }
  addWork('addAttendance', data).then((res) => {
    if (res.code === 200) {
      dialogVisibleLog.value = false // 关闭弹窗
      fetchData1() // 重新获取数据
    }
  })
}


// 确认按钮点击事件
const handleConfirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('确认提交吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        addWorkData() // 调用添加接口
      }).catch(() => {
        ElMessage.info('已取消提交')
      })
    } 
  })
}

function handleChange() {
  currentPage.value = 1;
  if(user.roleId == '3' || user.roleId == '4' || user.roleId == '5'){
    fetchData1()
  }else{
    fetchData()
  }
}

</script>
  
<style scoped>
.class {
  width: 90%;
  height: 10%;
  margin-bottom: 20px;
  margin-top: 20px;
}
/* 头部左侧 */
.header-left {
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.line {
  width: 2px;
  height: 20px;
  background-color: #007bff;
}
.title {
  padding-left: 10px;
  font-size: 20px;
  margin-right: 20px;
}
.className {
  margin-right: 10px;
}
:deep(.className .el-input__wrapper){
  border-radius: 12px !important;
}
.search {
  background-color: #0f6ab1;
  color: #fff;
  border: none;
  margin-left: 10px;
  border-radius: 16px;
  padding: 0;
  padding-right: 15px;
  padding-left: 36px;
}
.searchImg {
  position: absolute;
  top: 8px;
  left: 25px;
}
/* 头部右侧 */
.header-right {
  display: flex;
  align-items: center;
  margin-right: 40px;
}
.currentTime{
  font-size: 15px;
  margin-right: 10px;
}
.calendar-icon {
  display: flex ;
  align-items: center; 
}
.custom-calendar-icon {
  font-size: 20px; /* 可以根据需要调整图标大小 */
}
.addRiBao {
  margin-left: 10px;
  font-size: 15px;
}

/* 表格区域 */
.class-content {
  width: 90%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 表格数据 */
:deep(.el-table thead th) {
  background-color: #fbfcff !important;
}
:deep(.el-table .cell) {
  color: black;
}
:deep(.details1) {
  margin-left: 55px;
}
/* 报告不能换行 */
:deep(.el-table__body-wrapper .cell) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 分页 */
.page {
  margin-top: 50px;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
  align-items: center;

}
/* 分页背景色 */
:deep(.el-pager .is-active) {
  background-color: #0f6ab1 !important;
}
/* 模态框 */
:deep(.el-overlay .el-overlay-dialog) {
  position: absolute;
}
:deep(.el-overlay) {
  position: absolute;
}
:deep(.el-dialog) {
  padding: 0px;
  width: 800px;
}
:deep(.el-dialog header span) {
  display: inline-block;
  width: 100%;
  background-color: #0f6ab1;
  height: 40px;
  color: white;
  font-size: 15px;
  text-align: center;
  line-height: 40px;
}
:deep(.el-dialog__body){
  display: flex;
  justify-content: center;
}
:deep(.el-select) {
  width: 200px;
}
:deep(.el-dialog__footer) {
  text-align: center;
  padding-bottom: 20px;
}
:deep(.confirm) {
  margin-left: 50px;
  background-color: #0f6ab1;
}
:deep(.cancel) {
  background-color: #0f6ab1;
  color: white;
}

.name,
.content,
.date {
  color: black;
  font-size: 15px;
  margin-left: 20px;
  margin-bottom: 20px;
}
.content {
  display: flex;
  margin-top: 20px;
}
.content2 {
  width: 600px;
  max-height: 100px;
  overflow-y: auto
}
.date {
  margin-top: 20px;
}
.footer {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: right;
}
.footer button {
  background-color: #0f6ab1;
  color: white;
  margin-right: 20px;
}
.footer button:hover {
  background-color: #054a80;
  color: white;
}
</style>